<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">购物街</div>
        </nav-bar>
        <tab-control :titles="['流行', '新款', '精选']" class="tab-control2"
             @tabClick="tabClick" ref="tabControl1" v-show="isFixed"></tab-control>

        <scroll class="content" ref="scroll" :probeType="3" :pullUpLoad="true"
         @scroll1="scroll1" @pullingUp="pullingUp">
            <home-swiper :banners="banner" @swiperImgLoad="swiperImgLoad"/>
            <recommend-view @recommendLoad="recommendLoad" :recommends="recommend"></recommend-view>
            <feature-view @featureImgLoad="featureImgLoad"></feature-view>
            <tab-control :titles="['流行', '新款', '精选']" 
             @tabClick="tabClick" ref="tabControl2" ></tab-control>
            <good-list :goods="showGoods"></good-list>
        </scroll>
        <back-top @click.native="backClick" v-show="isShow"></back-top>
        
    </div>
    
</template>

<script>
// 子组件
import RecommendView from './childHome/RecommendView'
import FeatureView from './childHome/FeatureView'

// 公共组件
import NavBar from 'components/common/navbar/NavBar' 
import HomeSwiper from './childHome/HomeSwiper'
import TabControl from 'components/content/tabControl/TabControl'
import GoodList from 'components/content/goodList/GoodList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

// 函数
import {getHomeData, getHomeGoods} from 'network/home'

import {itemListerMixin} from 'common/mixin'










export default {
    data() {
        return {
            banner: [],
            recommend: [],
            goods: {
                'pop': {page: 0, list: []},
                'new': {page: 0, list: []},
                'sell': {page: 0, list: []}
            },
            currentType: 'pop',
            isShow: null,
            tabOffsetTop: 0,
            isFixed: null,
            saveY: 0,
            
        }
    },
    components: {
        HomeSwiper,
        RecommendView,
        FeatureView,
        NavBar,
        TabControl,
        GoodList,
        Scroll,
        BackTop
        
       
        
        

    },
   async created() {
    this.getHomeData()

    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')

    

        
    
        
        
    },
    destroyed() {
        console.log('home 销毁')
    },
    activated() {
        // console.log(this.$refs.scroll.scroll)
        // this.$refs.scroll.refresh()
        this.newRefresh()
        this.$refs.scroll.backTop(0, this.saveY, 0)
        
    },
    deactivated() {
        // console.log(this.$refs.scroll.getScrollY())
        this.saveY = this.$refs.scroll.getScrollY()
        // 取消全局事件的监听
        this.$bus.$off('itemImageLoad', this.itemImgListener)
    },
    mixins: [itemListerMixin],
    mounted() {
        // 3. 监听goodListItem图片加载完成
     
    },
    methods: {
         
       async getHomeData() {
            const res = await getHomeData()
            // console.log(res.data)
            this.banner = res.data.banner.list
            this.recommend = res.data.recommend.list
        },

        async getHomeGoods(type) {
            const page = this.goods[type].page + 1
            const res = await getHomeGoods(type, page)
            
            // console.log(res.data.list)

            this.goods[type].list.push(...res.data.list)
            this.goods[type].page += 1
            
            this.$refs.scroll.finishPullUp1()
        },

        // 子向父发送事件
        tabClick(index, item) {
            switch(item) {
                case '流行':
                    this.currentType = 'pop'
                    break;
                case '新款':
                    this.currentType = 'new'
                    break;
                case '精选':
                    this.currentType = 'sell';
                    break;
            }

            // 判断出错
            // if (item = '流行') {
            //     this.currentType = 'pop'
            // } else if (item = '新款') {
            //     this.currentType = 'new'
            // } else if (item = '精选') {
            //     this.currentType = 'sell'
            // }
            console.log(index, item) 
            this.$refs.tabControl1.currentIndex = index
            this.$refs.tabControl2.currentIndex = index
        },
        backClick() {
            this.$refs.scroll.backTop(0, 0,)
        },

        scroll1(position) {
            // console.log(position)
            this.isShow = position.y < -1000
            this.isFixed = -(position.y) >= this.tabOffsetTop

        },

        pullingUp() {
            this.getHomeGoods(this.currentType)
            

            // 重新计算可滚动高度 
            // this.$refs.scroll.scroll.refresh()
        },
        swiperImgLoad() { 
            // console.log(this.$refs.tabControl2.$el.offsetTop)
            // this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
        },
        featureImgLoad() { 
            // this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
            // console.log(this.$refs.tabControl2.$el.offsetTop)
        },
        recommendLoad() {
            console.log(this.$refs.tabControl2.$el.offsetTop)
            this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
        }
    }, 
     computed: {
        showGoods() { 
            return this.goods[this.currentType].list
        }
    }
    
}
</script>


<style scoped>
    #home{
        /* position: relative; */
        /* margin-top: 44px; */
        height: 100vh;
    }
    .home-nav{
        max-width: 640px;
        /* position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        
        right: 0;
        width: 100%;
        z-index: 9; */
        color: #fff;
        background: var(--color-tint);
    }

    .tab-control2{
        position: absolute;
        /* left: 0; */
        max-width: 640px;
        top: 0;
        width: 100%;
        z-index: 9;
        margin-top: 44px;
    }

    .content{
        height: calc(100% - 93px);
        overflow: hidden;
    }
    /* 方案二 */
    /* .content{
        position: absolute;
        top: 44px;
        bottom: 49px;
        left: 0;
        right: 0;

    } */


    /* .fixed{
        position: fixed;
        left: 0;
        top: 44px;
        width: 100%;
    } */
    
</style>